/*
 *@description: 用户详情管理
 *@Author:@reynold
 *@Date:2025-03-22 11:01:32
 *@Update:2025-03-22 11:01:32
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="box" style="height: 100vh; overflow-y: auto;"> <!-- 添加高度和溢出样式 -->
      <div class="box_top">
        <el-button size="mini" @click="addUser">添加</el-button>
      </div>
      <div class="box_bottom">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="userId"
            label="用户编号">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名">
          </el-table-column>
          <el-table-column
            label="头像">
            <template slot-scope="scope">
              <img :src="scope.row.avatar" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button class="columnBtn1" type="text" size="small" @click="showUser(scope.row)">查看</el-button>
              <el-button class="columnBtn2" type="text" size="small" @click="showPop(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 抽屉 -->
        <el-drawer
          title="添加用户"
          :visible.sync="drawer">
          <div class="demo-drawer__content">
            <el-form :model="drawerForm" :rules="rules">
              <el-form-item label="用户名" prop="userName" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.userName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.age" autocomplete="off" type="number"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.email" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
        </el-drawer>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <!-- 详细信息dialog -->
        <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column property="userId" label="用户id" width="150"></el-table-column>
            <el-table-column property="userName" label="用户名"></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img :src="scope.row.avatar" alt="">
              </template>
            </el-table-column>
            <el-table-column property="age" label="年龄"></el-table-column>
            <el-table-column property="email" label="邮箱"></el-table-column>
            <el-table-column property="createTime" label="注册时间" width="200"></el-table-column>
          </el-table>
        </el-dialog>
        <!-- 提示删除用户的dialog -->
        <el-dialog
          title="删除用户"
          :visible.sync="dialogVisible"
          width="30%">
          <span>确认要删除此用户吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="delUser">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data() {
    return {
      tableData: [
        {
          userId: 1,
          userName: '安琪',
          avatar: 'http://img.duoziwang.com/2018/18/06051452311170.jpg',
          age: 25,
          email: 'user1@example.com',
          createTime: '2025-01-01 00:00:00'
        },
        {
          userId: 2,
          userName: '高佳',
          avatar: 'https://img2.baidu.com/it/u=3887984625,2343006467&fm=253&fmt=auto&app=138&f=JPEG?w=199&h=199',
          age: 30,
          email: 'user2@example.com',
          createTime: '2025-02-01 00:00:00'
        },
        {
          userId: 3,
          userName: '吴彤',
          avatar: 'http://img.duoziwang.com/2021/02/1619504206148373.jpg',
          age: 28,
          email: 'user3@example.com',
          createTime: '2025-03-01 00:00:00'
        },
        {
          userId: 4,
          userName: '李欣然',
          avatar: 'http://img.duoziwang.com/2021/01/1618559409565222.jpg',
          age: 22,
          email: 'user4@example.com',
          createTime: '2025-04-01 00:00:00'
        },
        {
          userId: 5,
          userName: '丸子',
          avatar: 'http://img.duoziwang.com/2021/02/1619338015129745.jpg',
          age: 32,
          email: 'user5@example.com',
          createTime: '2025-05-01 00:00:00'
        }
      ],
      pageQuery: {
        pageSize: 10,
        pageNum: 1
      },
      total: 100,
      drawer: false,
      drawerForm: {
        userName: '',
        age: '',
        email: ''
      },
      formLabelWidth: '80px',
      loading: false,
      drawerTitle: '添加用户',
      dialogTableVisible: false,
      // 提示删除的变量
      dialogVisible: false,
      userId: 0,
      gridData: [],
      // 添加用户规则
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '请输入有效的年龄', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type:'string', pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/, message: '请输入有效的邮箱地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 初始序号
    initIndex() {
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    // 分页的方法
    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getList()
    },
    // 打开抽屉
    addUser() {
      this.drawer = true
    },
    // 取消抽屉
    cancelForm() {
      this.drawer = false
    },
    // 添加用户
    handlesubmit() {
      // 提交表单的时候应该把drawerForm的数据发送给后台
      this.$confirm('确定要添加用户吗')
       .then(_ => {
          this.loading = true;
          // 提交数据
          instance.post('/user/add', this.drawerForm).then(res => {
            if (res.data.status == 2001) {
              utils.showWarning(res.message)
            } else {
              utils.showSuccess(res.message)
              this.getList()
            }
          })
          // 提交完数据之后关闭抽屉
          this.loading = false
          this.drawer = false
          this.drawerForm.userName = ''
          this.drawerForm.age = ''
          this.drawerForm.email = ''
        })
       .catch(_ => {});
    },
    // 展示确认删除框
    showPop(scope) {
      this.dialogVisible = true
      this.userId = scope.userId
    },
    // 确认删除用户的方法
    delUser() {
      console.log(this.userId);
      instance.post('/user/del', this.userId).then(res => {
        utils.showSuccess(res.message)
        this.getList()
      })
      this.dialogVisible = false
    },
    // 分页获取table数据
    getList() {
      instance.post('/user/list', this.pageQuery).then(res => {
        this.tableData = res.data.list
        this.total = res.data.data.total
      })
    },
    // 查看数据详情
    showUser(scope) {
      console.log(scope);
      this.gridData = []
      this.gridData.push(scope)
      this.dialogTableVisible = true
    }
  },
  created() {
    this.getList()
  },
  components: {
    Card
  }
}
</script>

<style lang="less" scoped>
.box{
 .box_top{
   .el-button--mini{
     color: #fff;
     background-color: #4069e4e7;
     border: none;
   }
 }
 .box_bottom{
   .tiltle{
     margin: 10px;
     font-size: 16px;
     font-weight: 600;
   }
   .demo-drawer__content{
     form{
       height: 80vh;
     }
     .demo-drawer__footer{
       float: right;
       margin-right: 15px;
     }
   }
   .columnBtn1{
     color: #4069e4e7;
   }
   .columnBtn2{
     color: rgb(236, 65, 65);
   }
   // 分页样式
   .el-pagination{
     float: right;
   }
 }
}
.el-color-picker__icon, .el-input, .el-textarea{
  width: 300px;
}
</style>